<script lang="ts" setup>
import { useActivated } from '@/hooks/useActivated'
import { ref, defineAsyncComponent, reactive, onActivated, onMounted } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({
  name: 'CabientRecord'
})
const OperationRecordTabPane = defineAsyncComponent(
  () => import('@/views/equipment/cabinet/tabpane/OperationRecordTabPane.vue')
)
const AlarmRecordTabPane = defineAsyncComponent(
  () => import('@/views/equipment/cabinet/tabpane/AlarmRecordTabPane.vue')
)
const CabinetHdRecordTabPane = defineAsyncComponent(
  () => import('@/views/equipment/cabinet/tabpane/CabinetHdRecordTabPane.vue')
)
const OpenDoorRecordTabPane = defineAsyncComponent(
  () => import('@/views/equipment/cabinet/tabpane/OpenDoorRecordTabPane.vue')
)
const OperationRecordTabPaneRef = ref<InstanceType<typeof OperationRecordTabPane> | null>(null)
const AlarmRecordTabPaneRef = ref<InstanceType<typeof AlarmRecordTabPane> | null>(null)
const CabinetHdRecordTabPaneRef = ref<InstanceType<typeof CabinetHdRecordTabPane> | null>(null)
const OpenDoorRecordTabPaneRef = ref<InstanceType<typeof OpenDoorRecordTabPane> | null>(null)

const route = useRoute()
const selectType = ref<string>('operation')
const handleTabChange = () => {
  switch (selectType.value) {
    case 'operation':
      OperationRecordTabPaneRef.value?.load()
      break
    case 'batteryswap':
      CabinetHdRecordTabPaneRef.value?.load()
      break
    case 'alarm':
      AlarmRecordTabPaneRef.value?.load()
      break
    case 'opendoor':
      OpenDoorRecordTabPaneRef.value?.load()
      break
    default:
      break
  }
}

const watchParams = reactive({
  boxCode: route.query.boxCode
})
onActivated(() => {
  watchParams.boxCode = route.query.boxCode as string
})
useActivated(
  watchParams,
  { watchParams },
  [{ key: 'boxCode', path: 'watchParams.boxCode' }],
  handleTabChange,
  []
)
onMounted(() => {
  handleTabChange()
})
</script>

<template>
  <div class="xy-container">
    <el-tabs v-model="selectType" @tab-change="handleTabChange">
      <el-tab-pane label="操作记录" name="operation">
        <operation-record-tab-pane ref="OperationRecordTabPaneRef" />
      </el-tab-pane>
      <el-tab-pane label="换电记录" name="batteryswap">
        <cabinet-hd-record-tab-pane ref="CabinetHdRecordTabPaneRef" />
      </el-tab-pane>
      <el-tab-pane label="报警记录" name="alarm">
        <alarm-record-tab-pane ref="AlarmRecordTabPaneRef" />
      </el-tab-pane>
      <el-tab-pane label="开仓记录" name="opendoor">
        <open-door-record-tab-pane ref="OpenDoorRecordTabPaneRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped></style>
